<template>
	<view class="content">
		<view ref="navbar">
			<wd-navbar title="用户管理" fixed placeholder safeAreaInsetTop left-arrow @click-right="clickHeaderSearchButton"
				@click-left="clickHeaderLeft">
				<template #right>
					<wd-icon name="search" size="18" />
				</template>
			</wd-navbar>
		</view>
		<view ref="filter" class="page-data-filter">

			<view class="search" :class="{
						'search-hidden':!data.searchShow,
						'search-show':data.searchShow
					}">
			</view>

			<view class="drop-menu">
				<view class="list-where">
					<wd-drop-menu>
						<wd-drop-menu-item v-model="userTypeSelectValue" :options="userTypeOption" />
					</wd-drop-menu>
					<wd-drop-menu>
						<wd-drop-menu-item v-model="userGenderSelectValue" :options="userGenderOption" />
					</wd-drop-menu>
					<wd-drop-menu>
						<wd-drop-menu-item v-model="userRealStatusSelectValue" :options="userRealStatusOption" />
					</wd-drop-menu>
				</view>
				<view class="list-sort">
					<wd-drop-menu>
						<wd-drop-menu-item v-model="userlistSortSelectValue" :options="listSortOption" />
					</wd-drop-menu>
				</view>
			</view>
			<view class="user-status-tabs">
				<wd-tag type="primary" custom-class="space" plain round>全部</wd-tag>
				<wd-tag custom-class="space" plain round>正常</wd-tag>
				<wd-tag custom-class="space" plain round>冻结</wd-tag>
				<wd-tag custom-class="space" plain round>注销中</wd-tag>
				<wd-tag custom-class="space" plain round>锁定</wd-tag>
			</view>
		</view>
		<view class="user-list">
			<template v-for="(x,index) in data.userList">
				<userli :data="x" @clickLookUser="clickLookUser(x)"></userli>
			</template>
		</view>
		<!-- 锁定用户弹出框 -->
		<wd-action-sheet v-model="data.lockUserSheetStatus" :actions="data.lockUserSheetOption" cancel-text="取消" title="锁定时长" />
	</view>
</template>

<script setup>
	import userli from '@/components/user_li/user_li.vue'
	import userNaem from '@/components/user_name_text/user_name_text.vue';
	import userAvatar from "@/components/user_avatar/user_avatar.vue"
	import overallRequest from "@/utool/http/http.js"
	import search from "@/components/search/search.vue"
	import {
		ref,
		reactive,
		computed,
		watch
	} from "vue"
	import {
		onLoad,
		onReachBottom,
		onPageScroll,
		onReady
	} from "@dcloudio/uni-app"

	const navbar = ref(null)
	const filter = ref(null)

	// 下拉刷新被触发
	function onRefresh() {
		// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
		setTimeout(() => {
			// 1.5秒之后停止刷新动画
			this.$refs.paging.complete();
		}, 1500)
	}

	const data = reactive({
		tabs: ["全部", "正式用户", "临时用户"],
		currentTab: 0,
		userList: [],
		page: 1,
		total: null,
		pages: null,
		limit: null,
		reachBottom: false, // 页面到底
		lockUserSheetStatus: false,
		lockUserSheetOption: [{
				name: '一天'
			},
			{
				name: '三天'
			},
			{
				name: '长期',
			}
		],
		searchShow: false
	})
	onLoad(() => {
		getList()
	})
	onPageScroll(() => {
		data.searchShow = false
	})
	function clickHeaderLeft() {
		uni.navigateBack()
	}
	const userTypeSelectValue = ref(0)
	const userTypeOption = ref([{
			label: '全部用户',
			value: 0
		},
		{
			label: '正式用户',
			value: 1
		},
		{
			label: '临时用户',
			value: 2
		}
	])
	const userGenderSelectValue = ref(0)
	const userGenderOption = ref([{
			label: '不限',
			value: 0
		},
		{
			label: '男',
			value: 1
		},
		{
			label: '女',
			value: 2
		},
		{
			label: '保密',
			value: 3
		}
	])
	const userRealStatusSelectValue = ref(0)
	const userRealStatusOption = ref([{
			label: '不限',
			value: 0
		},
		{
			label: '个人认证',
			value: 1
		},
		{
			label: '企业认证',
			value: 2
		}
	])
	const userlistSortSelectValue = ref(0)
	const listSortOption = ref([{
			label: '综合排序',
			value: 0
		},
		{
			label: '最新注册在上',
			value: 1
		},
		{
			label: '最新注册在下',
			value: 2
		},
		{
			label: '最近活跃在上',
			value: 3
		}
	])

	// 滚动页面到底部
	onReachBottom(() => {

		let page = data.page
		let pages = data.pages
		if (page >= pages) {
			return
		} else {
			data.page++
			getList()
		}
	})

	// 点击顶部右搜索按钮
	function clickHeaderSearchButton() {
		let searchShow = data.searchShow
		data.searchShow = !searchShow
	}
	// 点击查看用户
	function clickLookUser(user) {
		uni.navigateTo({
			url: "/pages/Mange/User/info/info",
			success: res => {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('UserListInfo', {
					data: user
				})
			}
		})
	}
	// 点击删除用户
	function clickRemoveUser(user) {

	}
	// 点击锁定用户
	function clickLockUser(user) {
		data.lockUserSheetStatus = true
	}
	// 服务器获取列表
	function getList() {
		let url = "/manage/list"
		let page = data.page
		overallRequest(url, {
			data: {
				page
			}
		}).then(res => {
			let {
				limit,
				list,
				page,
				total
			} = res.data
			let pages = Math.ceil(total / limit)
			data.page = page
			data.pages = pages
			data.userList.push(...list)
		}).catch(err => {
			console.log(err);
		})
	}

	function clickUser(user) {
		uni.navigateTo({
			url: "/pages/Mange/User/info/info"
		})
	}
</script>

<style scoped>
	.page-data-filter {
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 90rpx;
		z-index: 100;
		border-bottom: 1px solid #c3c3c344;
		padding-bottom: 22rpx;
		background: white;
	}

	.search {
		height: 0rpx;
		background-color: #c3c3c344;
		transition: 200ms height linear;
	}

	.search-show {
		height: 65rpx;
	}

	.search-hidden {
		height: 0rpx;
	}

	.drop-menu {
		display: flex;
		padding: 0rpx 20rpx;
		padding-right: 30rpx;
	}

	.list-where {
		display: flex;
		gap: 18rpx;
	}

	.list-sort {
		flex: 1;
		display: flex;
		justify-content: flex-end;

	}

	.user-status-tabs {
		display: flex;
		gap: 20rpx;
		padding: 0rpx 40rpx;
	}

	.user-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #c3c3c344;
		/* padding: 30rpx 4%; */
		/* gap: 30rpx; */
	}
	.user-identity {
		height: 0rpx;
		width: 100%;
		background-color: red;
	}
</style>